<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Ball in Rotating Hexagon</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const gravity = 0.2;
        const friction = 0.99;
        const ballRadius = 10;
        const hexagonRadius = 200;
        const rotationSpeed = 0.01;

        let ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            dx: 2,
            dy: 2
        };

        let angle = 0;

        function getHexagonVertices(x, y, radius, rotation) {
            const vertices = [];
            for (let i = 0; i < 6; i++) {
                const angle = (Math.PI / 3) * i + rotation;
                const vx = x + radius * Math.cos(angle);
                const vy = y + radius * Math.sin(angle);
                vertices.push({ x: vx, y: vy });
            }
            return vertices;
        }

        function pointInPolygon(point, polygon) {
            let inside = false;
            for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
                const xi = polygon[i].x, yi = polygon[i].y;
                const xj = polygon[j].x, yj = polygon[j].y;
                const intersect = ((yi > point.y) !== (yj > point.y)) &&
                    (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);
                if (intersect) inside = !inside;
            }
            return inside;
        }

        function drawHexagon(vertices) {
            ctx.beginPath();
            ctx.moveTo(vertices[0].x, vertices[0].y);
            for (let i = 1; i < vertices.length; i++) {
                ctx.lineTo(vertices[i].x, vertices[i].y);
            }
            ctx.closePath();
            ctx.strokeStyle = '#000';
            ctx.stroke();
        }

        function drawBall(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fillStyle = '#f00';
            ctx.fill();
            ctx.closePath();
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Update ball position
            ball.dy += gravity;
            ball.x += ball.dx;
            ball.y += ball.dy;

            // Apply friction
            ball.dx *= friction;
            ball.dy *= friction;

            // Get hexagon vertices
            const vertices = getHexagonVertices(canvas.width / 2, canvas.height / 2, hexagonRadius, angle);

            // Check if ball is outside the hexagon
            if (!pointInPolygon({ x: ball.x, y: ball.y }, vertices)) {
                // Find the closest edge and reflect the ball
                let closestEdge = null;
                let minDistance = Infinity;

                for (let i = 0; i < vertices.length; i++) {
                    const p1 = vertices[i];
                    const p2 = vertices[(i + 1) % vertices.length];

                    const dx = p2.x - p1.x;
                    const dy = p2.y - p1.y;
                    const length = Math.sqrt(dx * dx + dy * dy);

                    const t = ((ball.x - p1.x) * dx + (ball.y - p1.y) * dy) / (length * length);
                    const closestX = p1.x + t * dx;
                    const closestY = p1.y + t * dy;

                    const distance = Math.sqrt((ball.x - closestX) ** 2 + (ball.y - closestY) ** 2);

                    if (distance < minDistance) {
                        minDistance = distance;
                        closestEdge = { p1, p2 };
                    }
                }

                if (closestEdge) {
                    const dx = closestEdge.p2.x - closestEdge.p1.x;
                    const dy = closestEdge.p2.y - closestEdge.p1.y;
                    const normalX = -dy;
                    const normalY = dx;
                    const length = Math.sqrt(normalX * normalX + normalY * normalY);
                    const nx = normalX / length;
                    const ny = normalY / length;

                    const dot = ball.dx * nx + ball.dy * ny;
                    ball.dx -= 2 * dot * nx;
                    ball.dy -= 2 * dot * ny;

                    // Move the ball slightly inside the hexagon to avoid getting stuck
                    ball.x += nx * 2;
                    ball.y += ny * 2;
                }
            }

            // Draw hexagon
            drawHexagon(vertices);

            // Draw ball
            drawBall(ball.x, ball.y, ballRadius);

            // Update hexagon rotation
            angle += rotationSpeed;

            requestAnimationFrame(update);
        }

        update();
    </script>
</body>
</html>